<template>
  <div>
    <!-- <h2>{{this.$store.state.cartList}}</h2> -->
    <nav-bar class="navbar">
      <div slot="center">购物车</div>
    </nav-bar>
    <div class="card">
      <van-card
        v-for="(item, index) in this.$store.state.cartList"
        :key="index"
        :num="item.count"
        :price="item.newPrice"
        :title="item.title"
        :thumb="item.imgURL"
      >
        <template #footer>
          <van-button size="mini" @click="addCount(index)">+</van-button>
          <van-button size="mini" @click="decCount(index)">-</van-button>
          <van-button size="mini" @click="delectCart(index)">删除</van-button>
        </template>
      </van-card>

    </div>
  </div>
</template>

<script>
import NavBar from "common/navbar/NavBar";
export default {
  name: "Carts",
  components: {
    NavBar,
  },
  data() {
    return {
      currentIndex: 0,
    };
  },
  created() {
  },
  mounted() {},
  methods: {
    delectCart(index){
      console.log(index);
      this.$store.commit('delectCart', index)
    },
    decCount(index){
      this.$store.commit('decCount', index)
    },
    addCount(index){
      this.$store.commit('addCount', index)
    }
  },
};
</script>

<style lang="css" scoped>
.navbar {
  position: fixed;
  top: 0;
  font-size: 18px;
  color: #fff;
  background-color: var(--color-tint);
}
.card {
  position: fixed;
  top: 44px;
  width: 100vw;
}
</style>